<script lang="ts" setup>
  import Divider from '@sscd/divider';
  import Steps from '@sscd/steps';
</script>

<template>
  <div class="demo">
    <div class="demo-title">点状步骤条</div>
    <div class="demo-content">
      <Steps progress-dot :current="1">
        <Steps.Step title="Finished" description="This is a description." />
        <Steps.Step title="In Progress" description="This is a description." />
        <Steps.Step title="Waiting" description="This is a description." />
      </Steps>
      <Divider />
      <Steps progress-dot :current="1" direction="vertical">
        <Steps.Step title="Finished" description="This is a description. This is a description." />
        <Steps.Step title="Finished" description="This is a description. This is a description." />
        <Steps.Step title="In Progress" description="This is a description. This is a description." />
        <Steps.Step title="Waiting" description="This is a description." />
        <Steps.Step title="Waiting" description="This is a description." />
      </Steps>
    </div>
  </div>
</template>
